<template>
  <div class="px-3">
    <div v-if="list.length">
      <n-timeline>
        <n-timeline-item v-for="(item,index) in list" :key="index"
                         :time="dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')">
          <template #icon>
            <n-icon>
              <icon icon="carbon:circle-filled" width="20" height="20"></icon>
            </n-icon>
          </template>
          <n-card>
            <div class="space-y-3">
              <div class="flex items-center justify-between">
                <h3 @click="handlePost(item.id)"
                    class="cursor-pointer text-blue-600 hover:opacity-80 transition-all dark:text-blue-400 truncate ">
                  {{ item.title }}</h3>
                <n-button text>
                  <TextIcon tip="分类" icon="iconamoon:category" :text="item.categoryName" :size="15"></TextIcon>
                </n-button>
              </div>
              <div class="flex justify-between">
                <ArrayTag class="hidden sm:block" tip="文章标签" :tags="item.tags" :size="13"></ArrayTag>
                <TextIcon tip="作者" icon="mdi:user" :text="item.username" :size="15"></TextIcon>
              </div>
            </div>
          </n-card>
        </n-timeline-item>
      </n-timeline>

      <n-button ref="targetRef" v-if="list.length<pagination.itemCount" @click="handleMore" block>加载更多</n-button>
      <n-button v-else text block>已经到底</n-button>
    </div>
    <div v-else>
      <n-empty></n-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import api from "@/api";
import {Icon} from "@iconify/vue";
import dayjs from "@/utils/dayjs";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import ArrayTag from "@/components/pc/tag/ArrayTag.vue";
import router from "@/router";

const list = ref<IPost[]>([])

import {useElementVisibility} from "@vueuse/core";


const targetRef = ref(null)
const targetIsVisible = useElementVisibility(targetRef)

const props = defineProps({
  orParams: {
    type: Object,
    default() {
      return {}
    },
  },
  andParams: {
    type: Object,
    default() {
      return {}
    }
  },
  orderParams: {
    type: Object,
    default() {
      return {}
    }
  },
})
watch(props.andParams, () => {
  list.value = []
  pagination.pageNo = 1
  getPostList()
})
watch(targetIsVisible, () => {
  if (targetIsVisible.value) {
    handleMore()
  }
})
const pagination = reactive(
    {
      pageSize: 10,
      pageNo: 1,
      itemCount: 0,
    })
const getPostList = () => {
  window.$loadingBar.start()
  api.post.queryList({
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    andParams: JSON.stringify(props.andParams),
    orderParams: JSON.stringify(props.orderParams),
  }).then(res => {
    res.data.data.records.forEach((item: any) => {
      item.tags = item.tags ? JSON.parse(item.tags) : []
    })
    list.value = list.value.concat(res.data.data.records)
    pagination.itemCount = res.data.data.total
  }).finally(() => {
    window.$loadingBar.finish()
  })
}

const handlePost = (id: string) => {
  router.push({
    path: `/pc/post/p/${id}`
  })
}
const handleMore = () => {
  pagination.pageNo++
  getPostList()
}
</script>

<style scoped>
:deep(.n-card__content:first-child) {
  padding: 10px;
}
</style>